<template>
  <div id="TypeStatistics">
    <el-row :gutter="10" class="linkShowSearchCondition" v-if="roleID !== 2">
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('起始日期：')}}</div>
        <el-date-picker v-model="record.startTime" clearable type="datetime" value-format='yyyy-MM-dd HH:mm:ss' size='small' :placeholder="$t('选择起始日期时间')">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('结束日期：')}}</div>
        <el-date-picker v-model="record.endTime" clearable type="datetime" value-format='yyyy-MM-dd HH:mm:ss' size='small' :placeholder="$t('选择结束日期时间')">
        </el-date-picker>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('源地址：')}}</div>
        <el-input v-emoji v-model="record.srcIp" style="width:217px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('目的地址：')}}</div>
        <el-input v-emoji v-model="record.dstIp" style="width:217px;margin-bottom:10px;" size='small'></el-input>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <div style="width:70px;display:inline-block;">{{$t('协议类型：')}}</div>
        <el-select v-model="record.typeType" filterable clearable :placeholder="$t('请选择')" style="margin-bottom:10px;" size='small'>
          <el-option v-for="item in typeTypeList" :key="item.key" :label="item.key" :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="6" style="width:350px;">
        <el-button type="success" size='small' @click="listData()">{{$t('查询统计')}}</el-button>
      </el-col>
    </el-row>
    <el-row class='typeTablePie'>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 10 }" :lg="{ span: 10 }" :xl="{ span: 10 }" class='typeTableContext'>
        <span style="margin-left:8px;">{{$t('协议基本信息')}}</span>
        <el-divider></el-divider>
        <el-table ref="multipleTable" size='mini' border :data="tableList" tooltip-effect="dark" height="450" style="width: 100%;margin-top:10px;">
          <el-table-column prop="key" align='center' :label="$t('协议名称')">
            <template slot-scope="scope">
              <tooltip :copyText="$t(scope.row.key)" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column prop="value" align='center' :label="$t('数量')">
            <template slot-scope="scope">
              <tooltip :copyText="scope.row.value" class="wid190">
              </tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :xs="{ span: 24 }" :sm="{ span: 24 }" :md="{ span: 14 }" :lg="{ span: 14 }" :xl="{ span: 14 }" class='TypePieContext'>
        <el-divider direction="vertical"></el-divider>
        {{$t('协议类型统计')}}
        <el-divider></el-divider>
        <type-pie ref="typePie" :pieList='tableList'></type-pie>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { getUserInfo } from '@/utils/auth'
import { searchL4type } from '@/api/system/log'
import { Loading } from 'element-ui'
import TypePie from './TypePie.vue'
export default {
  name: 'TypeStatistics',
  components: {
    TypePie
  },
  data () {
    return {
      saveDialogVisible: false,
      roleID: getUserInfo().roleID,
      record: {
        typeType: '',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: ''
      },
      recordCopy: {
        typeType: '',
        startTime: '',
        endTime: '',
        srcIp: '',
        dstIp: ''
      },
      total: 0,
      loadingInstance: null,
      tableList: [],
      typeTypeList: [],
      dipStr: this.$t('目的地址：'),
      endTimeStr: this.$t('结束时间：'),
      sipStr: this.$t('源地址：'),
      startTimeStr: this.$t('起始时间：'),
      typeStr: this.$t('协议类型：')
    }
  },
  mounted () {
    this.listData()
  },
  methods: {
    listData () {
      if (document.getElementById('TypeStatistics')) {
        this.loadingInstance = Loading.service({
          target: '#TypeStatistics',
          lock: true,
          text: this.$t('加载'),
          spinner: 'el-icon-loading',
          background: 'rgba(255, 255, 255, 0.4)'
        })
      }
      searchL4type(this.record).then(res => {
        if (res.status === 0) {
          this.tableList = res.info
          this.typeTypeList = res.info
        }
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      }).catch(e => {
        if (this.loadingInstance) {
          this.loadingInstance.close()
          this.loadingInstance = null
          this.$emit('loadingClick')
        }
      })
    },
    dialogVisible () {
      this.saveDialogVisible = true
      this.$nextTick(() => {
        this.$refs.refSaveDialogVisible.init()
      })
    },
    getImage () {
      var _that = this
      return new Promise(function (resolve, reject) {
        _that.$refs.typePie.exportImage().then(res => {
          var formData = {
            chartChar: res,
            countType: 'eventType',
            dip: _that.dipStr + (_that.record.dstIp || '--'),
            endTime: _that.endTimeStr + (_that.record.endTime || '--'),
            sip: _that.sipStr + (_that.record.srcIp || '--'),
            startTime: _that.startTimeStr + (_that.record.startTime || '--'),
            tableData: _that.tableList,
            type: _that.typeStr + (_that.record.typeType || '--')
          }
          resolve(formData)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.el-divider--horizontal {
  margin: 12px 0;
}
.typeTablePie {
  margin-top: 10px;
  width: 100%;
}
// .typeTableContext {
//   min-width: 500px;
// }
// .TypePieContext {
//   min-width: 500px;
// }
</style>
